import Vue from "vue"
import VueRouter from "vue-router"
import routes from "./routes"
import store from "@/store"

Vue.use(VueRouter)

const router = new VueRouter({
  mode: "history",
  routes: routes,
  //控制路由切换的时候,滚动条的位置
  scrollBehavior() {
    return {
      x: 0,
      y: 0,
    }
  },
})

//路由前置守卫进行 路由跳转的鉴权操作
//1.设置一个白名单,控制哪些路由不需要登录就可以访问的
const whitePath = [
  "home",
  "login",
  "register",
  "search",
  "detail",
  "addcartsuccess",
]
//2. 配置全局前置守卫
router.beforeEach(async (to, from, next) => {
  console.log(1)
  const token = store.state.user.token
  //3.判断token是否存在
  if (token) {
    console.log(2)
    //5.当有token时，判断去往的页面是不是登录页，是的话直接回到首页
    if (to.name === "login") {
      next("/home")
    } else {
      // 6.现在有token去的不是登录页,判断我们是否拥有用户信息(一般来说,登录只会返回token,然后我们一旦有token都会再次发送请求请求用户的详细信息)
      // !! 表示将目标转为布尔值，这里需要判断userInfo里是否有nickName，也可以认为判断有token的情况下是否有用户信息
      const isUserInfo = !!store.state.user.userInfo.nickName
      if (isUserInfo) {
        next() //有token 又有用户信息 则完全放行
      } else {
        try {
          //有token 但是没有用户信息，则需要去请求用户信息
          //异常处理,一旦刷新,token是持久化存的,用户信息不是持久化的,所以刷新以后一定会重新获取用户信息,一旦token过期或者token被篡改,则无法正常获取数据,此时应该清除掉已经报废的token,并且重新让用户登录
          await store.dispatch("user/getUserInfo")
          next() //一旦得到用户信息则无条件放行
        } catch (error) {
          //如果获取用户信息异常,说明token已经不能用了,需要清掉重新登录
          await store.dispatch("user/resetToken")
          next("/login")
        }
      }
    }
  } else {
    //4.当没有token时  判断当前去的路由地址是不是在白名单中,如果是则直接放行,如果不是则直接把导航定位到登录页
    if (whitePath.includes(to.name)) {
      console.log(3)
      next()
    } else {
      console.log(4)
      next("/login")
    }
  }
})

export default router
